<template>
    <div class="friend-list">
        <h3>好友列表</h3>
        <ul>
            <li
                v-for="friend in friends"
            :key="friend.id"
            @click="selectFriend(friend)"
            :class="{ active: friend.id === selectedFriendId }"
            >
            {{ friend.name }}
        </li>
    </ul>
</div>
</template>

<script>
    export default {
    props: {
    friends: {
    type: Array,
    required: true,
},
},
    data() {
    return {
    selectedFriendId: null,
};
},
    methods: {
    selectFriend(friend) {
    this.selectedFriendId = friend.id;
    this.$emit("select-friend", friend);
},
},
};
</script>

<style scoped>
    .friend-list {
    padding: 10px;
}

    ul {
    list-style: none;
    padding: 0;
}

    li {
    padding: 10px;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 5px;
    transition: background-color 0.3s;
}

    li:hover {
    background-color: #34495e;
}

    li.active {
    background-color: #2980b9;
}
</style>